<template>
  <div class="app-container">
    <div class="flex">
      <div class="right width400 ml10">
        <el-card class="box-card history-box mb20 history-baqsj">
          <div slot="header" class="clearfix flex flex-row align-center height32">
            <div class="line" />
            <span class="font16 ml10 flex-auto">审批节点</span>
          </div>
          <vue-scroll :ops="ops">
            <div class="timeline">
              <el-timeline v-if="processInfoList.length">
                <el-timeline-item
                  v-for="item in processInfoList"
                  :key="item.id"
                  :hide-timestamp="true"
                  icon="el-icon-my-time"
                  color="#277fd6"
                  size="large"
                >
                  <div class="flex flex-column">
                    <div class="time">
                      <span class="text">{{ item.updateTime }}</span>
                      <el-tag effect="dark" size="small" class="stateTag ml10">
                        {{ item.status == 1 ? '已处理' : item.status == 2 ? '无需处理' : '待处理' }}
                      </el-tag>
                    </div>
                    <div class="info">
                      <span class="label">处置人：</span><span class="detail">{{ item.processBy }}</span>
                    </div>
                    <div class="info">
                      <span class="label">流转节点：</span><span class="detail">{{ getStatusName(item.processStatus) }}</span>
                    </div>
                    <!-- <div class="info">
                      <span class="label">审批部门：</span><span class="detail">医务处</span>
                    </div> -->
                    <div class="info">
                      <span class="label">审批结果：</span><span class="detail">{{ item.auditStatus == 1 ? '通过' : item.auditStatus == 2 ? '驳回' : '' }}</span>
                    </div>
                  </div>
                </el-timeline-item>
              </el-timeline>
              <div v-else class="empty-time">
                <img src="@/assets/empty.png" alt="">
                <span>暂时没有审批内容</span>
              </div>
            </div>
          </vue-scroll>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { circulationStatusList } from '../common'
export default {
  name: 'BaqsjHandle',
  components: {
  },
  props: {
    processInfoList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      timelineShow: true,
      ops: {
        vuescroll: {
          mode: 'native',
          sizeStrategy: 'percent',
          detectResize: true,
          locking: true
        },
        scrollPanel: {
          maxHeight: 800
        },
        bar: {
          background: '#277fd6',
          size: '3px',
          keepShow: true
        },
        rail: {
          background: '#E0E8F0',
          opacity: 1,
          size: '3px',
          specifyBorderRadius: false,
          gutterOfEnds: '50px',
          gutterOfSide: '0px',
          keepShow: false
        }
      }
    }
  },
  computed: {
    ...mapGetters(['name', 'userId'])
  },
  async created() {
  },
  methods: {
    getStatusName(auditStatus) {
      return circulationStatusList.find(item => item.value === auditStatus).label || ''
    }
  }
}
</script>
<style lang="scss" scoped>
.process-header {
    height: 50px;

    .title {
        font-size: 25px;
        font-weight: 600;
    }

    .sub-title {
        font-size: 19px;
        vertical-align: bottom;
        padding-left: 10px;
        color: #555;
    }
}

.history-box {
    border-radius: 15px;
    background: #fff;

    .line {
        height: 22px;
        width: 5px;
        background: #277fd6;
    }
}

.empty-time {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    img {
        width: 200px;
    }
}

::v-deep .el-input__inner {
    color: #277fd6 !important;
}

::v-deep .el-textarea__inner {
    color: #277fd6 !important;
}
</style>
